import React, { useState, useCallback } from "react";

const Child = React.memo(function (props) {
    console.log("子组件渲染了 render ");
    return (
        <div>
            Child
            <button onClick={props.onClick}>点击子组件</button>
        </div>
    );
});
function App() {
    const [count, setCount] = useState(0);
    const [random, setRandom] = useState(0);
    // useCallback 和 useEffect 参数很类似
    // useCallback 主要作用是缓存传入的函数

    //  count改变的时候useCallback会重新缓存函数
    const fn = useCallback(() => {
        console.log("我点击了", count);
    }, [count]);
    // const fn = () => {
    //     console.log("我点击了", count);
    // };

    return (
        <div>
            <p>随机数: {random}</p>
            <p>count: {count}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button>
            <button
                onClick={() => {
                    fn();
                }}>
                取值count
            </button>
            <Child onClick={fn}></Child>
        </div>
    );
}

export default App;
